<template>
  <el-scrollbar style="height:100%;position: relative;">
    <div id="uIndex">
      <div id="uIndex-header">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content">
              <el-link type="info" :underline="false" style="ffont-weight:700;font-size:16px;line-height:20px; color: #6d757a;padding-left:20px;"
                @click="toMain">会说话的曼唐</el-link>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="grid-content">
              <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select" @keyup.enter.native="query">
                <el-button slot="append" icon="el-icon-search" @click="query"></el-button>
              </el-input>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="grid-content">
              <div v-if="userLegal" style="text-align:right;">
                <el-avatar :size="40" :src="userMsg.avatar">
                  <img :src="noLoginUserAvatar" />
                </el-avatar>
                <el-link :underline="false" @click="toUserCenter" class="linkA">{{userMsg.nickname}}</el-link>
                <el-link :underline="false" class="linkA" @click="toExpertMsg">消息</el-link>
                <el-link v-if="userMsg.type == 2" :underline="false" class="linkA" @click="toMate">素材管理</el-link>
                <el-button type="warning" icon="el-icon-switch-button" circle style="vertical-align:top;" @click="logout"></el-button>
              </div>
              <div v-else style="text-align:right;">
                <el-avatar :size="40" :src="noLoginUserAvatar"></el-avatar>
                <el-link :underline="false" @click="toLogin" class="linkA">登录</el-link>
                <el-link :underline="false" @click="toRegister" class="linkA">注册</el-link>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div id="uIndex-container">
        <keep-alive>
          <router-view v-if="$route.meta && $route.meta.keepAlive" ref="mainView"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta || !$route.meta.keepAlive" ref="mainView"></router-view>
      </div>
      <div id="uIndex-footer">
        <p style="text-align:center">
          一款专注于曼唐图像标注和学习的平台<br>
          报错请联系：1608483232@qq.com
        </p>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
import noLoginUserAvatar from "@/assets/user/noLoginUserAvatar.png"
export default {
  data() {
    return {
      keyword: "",
      noLoginUserAvatar: noLoginUserAvatar
    }
  },
  computed: {
    ...mapGetters({
      userMsg: 'user/getUserMsg',
      userType: 'user/getUserType',
      userLegal: 'user/getUserIsLegal'
    })
  },
  created() {
    this.keyword = this.$route.query.keyword || ""
  },
  mounted() {
    window.console.log(this.userMsg);
  },
  methods: {
    ...mapMutations({
      setUserMsg: 'user/setUserMsg'
    }),
    //去注册
    toRegister() {
      this.$router.push({
        path: '/user/register'
      })
    },
    //去登陆
    toLogin() {
      this.$router.push({
        path: '/user/login',
        query: { beforePath: this.$route.fullPath }
      })
    },
    //去个人中心
    toUserCenter() {
      if (this.userMsg.type == 1) {
        if (this.$route.path != '/uIndex/generalCenter') {
          this.$router.push({
            path: '/uIndex/generalCenter'
          })
        }
      }
      else if (this.userMsg.type == 2) {
        if (this.$route.path != '/uIndex/expertCenter') {
          this.$router.push({
            path: '/uIndex/expertCenter'
          })
        }
      }
    },
    //退出登录
    logout() {
      this.setUserMsg({}, true);
      if (this.$route.path != "/uIndex/main") {
        this.$router.push({
          path: '/uIndex/main'
        })
      }
      else {
        this.$router.push({
          path: '/uIndex/'
        })
      }
    },
    //查询
    query() {
      window.console.log(this.keyword, this.$route.query.keyword)
      if (this.keyword != this.$route.query.keyword) {
        this.$router.push({
          path: '/uIndex/main',
          query: { keyword: this.keyword }
        })
      }
    },
    //去首页
    toMain() {
      if (this.$route.fullPath != "/uIndex/main") {
        this.$router.push({
          path: '/uIndex/main'
        })
      }
    },
    //去素材管理
    toMate() {
      if (this.$route.path != "/uIndex/expertCenter/originMateManage") {
        this.$router.push({
          path: "/uIndex/expertCenter/originMateManage"
        })
      }
    },
    //私信
    toExpertMsg() {
      if (this.userMsg.type == 1) {
        if (this.$route.path != "/uIndex/generalCenter/privateMessage") {
          this.$router.push({
            path: "/uIndex/generalCenter/privateMessage"
          })
        }
      }
      else {
        if (this.$route.path != "/uIndex/expertCenter/privateMessage") {
          this.$router.push({
            path: "/uIndex/expertCenter/privateMessage"
          })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
/deep/ .el-scrollbar__wrap {
  background: rgb(244, 245, 247);
}
#uIndex {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#uIndex-header {
  height: 59px;
  border-bottom: 1px solid #e7e7e7;
  width: 100%;
  position: fixed;
  top: 0px;
  background: #fff;
  z-index: 10;
}
#uIndex-container {
  margin-top: 60px;
  padding: 0px 10% 10px 10%;
}
#uIndex-footer {
  bottom: 0px;
  width: 70%;
  border-top: 1px solid #e7e7e7;
  padding: 20px 10%;
}
.grid-content {
  padding: 10px 10px 9px 10px;
  height: 40px;
  overflow: hidden;
}
.linkA {
  padding: 5px 10px;
  line-height: 30px;
  vertical-align: top;
}
</style>